<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0 minimal-ui">
	<title>我的练习</title>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/size.js"></script>
	<style type="text/css">
		.ssa li{list-style:none;float:left;margin:10px 30px;}
		.sss{width:50px;height:60px;background:#ff0;}
		.aa{width:200px;margin:40px 0;clear:both; -webkit-line-clamp:3;word-wrap:break-word;word-break:break-all;height:60px;}
		body{padding:0;margin:0}
		.banner{height:100%;background:url(images/ccc.jpg) no-repeat center center;height:400px;}
		.main{margin:0 20px;background:#ff0;}
		
		.asx{padding:10px;color:#000;margin:20px;line-height:50px;text-align:center;position: relative;}
		.asx:before{
			position: absolute;
			left: 0;
			top: 0;
			right: 11px;
			bottom: 0;
			border-left: 1px #f00 solid;
			border-bottom: 1px #f00 solid;
			content: "";
		}
		.asx:after{
			position: absolute;
			left: 11px;
			top: 0;
			right: 0;
			bottom: 0;
			border-right: 1px #000 solid;
			border-top: 1px #000 solid;
			content: "";
		}
		.asx:hover:before{
			right: 0;
			transition: all 0.15s ease-out
		}
		.asx:hover:after{
			left: 0;
			transition: all 0.15s ease-out
		}

		body,html,p,ul,ol{padding: 0;margin:0;}
		body{background: #f0f0f0;overflow-x:hidden;}
		.box{
			background: #ccc;
			margin-top: 20px;
		}
		.box ul{
			width: 6.4rem;
			margin:0 auto;
			overflow: hidden;
		}
		.box li{
			list-style: none;
			float: left;
			display: block;
			width: 2rem;
			height: 2rem;
			line-height: 2rem;
			text-align: center;
			background: #fff;
			font-size: 0.5rem;
			margin:0.1rem;
		}
		.box li:nth-child(2),.box li:nth-child(5),.box li:nth-child(4){
			margin:0.1rem 0;
		}
		.box li:nth-child(4),.box li:nth-child(5),.box li:nth-child(6){
			margin:0 0.1rem;
		}
		.box li:nth-child(5){margin:0;}
		.box li:nth-child(8){margin:0.1rem 0;}
		.line{
			height:3px;
			width:400px;
			background:#c56;
			position:absolute;
			top:200px;
			left:200px;
			-webkit-transform:rotate(-45deg);
			animation:mymove 5s infinite;
			-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
			-moz-transform-origin: 0% 0%;
			-webkit-transform-origin:0% 0%;
			-o-transform-origin:0% 0%;	
			transform-origin:0% 0%;			
		}
		@keyframes mymove
		{
			from {width:0px;}
			to {width:400px;}
		}

		@-webkit-keyframes mymove /*Safari and Chrome*/
		{
			from {width:0px;}
			to {width:400px;}
		}
		.ii{
			width:0.64rem;height:0.64rem;display:inline-block;background:#ff0 url(images/arrow.png) no-repeat center center;background-size:0.34rem 1.16rem;background-position:center 0.05rem
		}
	i:hover{
		width:0.64rem;height:0.64rem;display:inline-block;background:#ff0 url(images/arrow.png) no-repeat center center;background-size:0.34rem 1.16rem;
		background-position:center -0.58rem
	}
	</style>
</head>
<body>
	<div class="qqq">
		<div class="line animated"></div>
		<div id="big" style="width:200px;height:200px;position:absolute;top:100px;left:100px;border-radius:100%;text-align:center;line-height:200px;background:-webkit-linear-gradient(bottom,#55d3b3 0%,#55d3b3 80%,#ee5858 80%,#ee5858 100%)">90%</div>
	</div>
		<br>
	<div id="list">
		<input type="button" class="btn1" value="按钮1"/>
		<input type="button"  class="btn2" value="按钮2"/>
		<input type="button"  class="btn3" value="按钮3"/>
		<input type="button"  class="btn4" value="按钮4"/>
	</div>
		<br>
	<div class="mun">
		<p>dddddd</p>
	</div>
		<br>
	<div class="inputs">
		<input type="button" value="1" class="clickBox"/>
		<input type="button" value="2" class="clickBox"/>
		<input type="button" value="3" class="clickBox"/>
	</div>
	<br>
	<input type="button" id="btn5" value="btn5"/>
	<i class="ii"></i>
	<script type="text/javascript" src="js/layui-v2.2.45/layui.js"></script>
	<script type="text/javascript">
	flowLoadImg();
	function flowLoadImg(){
    var path = "http://127.0.0.1:8020/1/js/json.json";
    layui.use('flow', function(){
    var $ = layui.jquery;
    var flow = layui.flow;
        flow.load({
            elem: '.list ', //指定列表容器
            done: function(page, next){ 
                var lis = [];
                $.get("http://127.0.0.1:8020/1/js/json.json", function(res){
							//console.log(res);
                });
            }
        });
    });
}

	$(function() {
           $("#checkAll").click(function() {
                $('input[name="subBox"]').attr("checked",this.checked); 
            });
            var $subBox = $("input[name='subBox']");
            $subBox.click(function(){
                $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
            });
       });
		var x = 1;
		function test(y = x){
			return "y"+"..."+y;
		}
		var s = test(2);
		console.log(s);
		$(window).scroll(function(){
					var scroT=document.documentElement.scrollTop||document.body.scrollTop;  
                    var clieH=document.documentElement.clientHeight||document.body.clientHeight;  
					var docH = document.documentElement.offsetHeight;
			if((docH-scroT-clieH)<200){
			}
		});

	function formatSeconds(value) { 
	var theTime = parseInt(value);// 秒 
	var theTime1 = 0;// 分 
	var theTime2 = 0;// 小时 
	if(theTime > 60) { 
	theTime1 = parseInt(theTime/60); 
	theTime = parseInt(theTime%60); 
	if(theTime1 > 60) { 
	theTime1 = parseInt(theTime1%60); 
	} 
	} 
	var result = ""+parseInt(theTime)+"秒"; 
	if(theTime1 > 0) { 
	result = ""+parseInt(theTime1)+"分"+result; 
	} 
	return result; 
	} 
		$(function(){
			//  var reg=new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"); 
			var reg=/^[\u4e00-\u9fa5a-z]+$/gi;
			$(".btn_1").on("click",function(){
				var t=$(".text").val();
				if(reg.test(t)){
					alert("ok");
				}else{
					alert("no");
				}
			});
			$(".ww").addClass("on");
		});
	var a=3.1415768;
	//console.log(a.toFixed(6));
	
	/*	var list = document.getElementById('list');
		var inputs = list.getElementsByTagName('input');
		var len = inputs.length;
		for (var i=0;i< len;i++) {
			inputs[i].onclick = function (ii) {
				return function(){
					alert(ii);
				};
			}(i);
		}
		for (var i=0;i< len;i++) {
			inputs[i].id=i;
			inputs[i].onclick = function () {
					alert(this.id);
			};    
		}*/
		<!-- 继承 构造函数继承  原型链继承 -->
		function People(){
			this.name="kitty";
			this.age=12;
			this.say1=function(){
				alert("hello1");
			},
			this.say2=function(){
				alert("hello2");
			}
		}
		function Child(){}
		var car1 = new People();
		//car1.say1();
		Child.prototype=new People();
		var car = new Child();
		//car.say2();
		<!-- call apply		-->
		function add(a,b){
			alert(a+b);
		}
		function sub(){
			alert(a-b);
		}
		//add.call(sub,2,5);  //可以接受多个参数 sub调用add
		//add.apply(sub,[2,5]); //最多两个，后一个是数组，多个参数时，也要放到数组里
		<!-- arguments -->
		function argue(){   //arguments不是数组，具有数组的length属性
			//console.log(arguments);
			//console.log(arguments instanceof Array)  false
			var arr = Array.prototype.slice.call(arguments);
			//console.log(arr instanceof Array) true  instanceof判断一个实例是否属于它的父类型。
		}
		argue(1,2,5,6,8);
		<!-- 闭包点击一个按钮 是变量逐渐增加 -->
		var f=0;
		$(".btndd1").on("click",function(){
			f++;
			return function(){
				var n=f;
				alert(n);
			}(f);
		});
		<!-- splice -->
		var arr = ['a','b','c','f','k'];
		var a1 = arr.splice(0,1); //删除 开始位置，删除项数  返回删除的项
		var a2 = arr.splice(1,2,"d","l");//替换 开始位置，替换项数  返回被替换的项
		var a3 = arr.splice(1,0,"dd");//插入 插入项的起始位置，第二个为0  返回空数组

		var arr2 = [1,2,3,4,5];
		//console.log(arr2.slice(1,3)); 2
		//console.log(arr2.slice(-2,-1));
		var str="welcomebeijing";
		//console.log(str.substr(1,4)); //4
		//console.log(str.substring(1,4)); //slice substring方法返回的值 包含第一位对应的字符，但不包含最后一位包含的字符 substring方法不支持负数参数
		var s  = "￥5,306.00";
		//console.log(s.substr(1));
		
		var arr2=[1,2,3,4,5];
		arr2.map(function(g){
			//console.log(g);
		});
		
		 var foo = 1;
		function bar() {
			foo = 10;
			return;
			function foo() {}
		}
		bar();
		//console.log(foo); //1
		function dg (n){
			if(n <= 1){
				return 1;
			}else{
				return n+"*"+dg(n-1);
			}
		}
		//console.log(dg(5));
		function A(xx){
			this.x = xx;
			return this;
		}
		var x = A(5);  
		var y = A(6);
//console.log(x);//6 覆盖了
		function Foo(){
			g=function(){alert(1)}
		}

		// console.log(g());  //3 因为函数声明必须在前
		var g = function(){alert(2)};
		// console.log(g());         //alert(2)  console.log()undefined 函数声明必须在前
		function g(){alert(3)}
		
		false == "0"  //true
		/*-- {} == {} //false
		false == null //false
		undefined == null //true
		undefined == "null" //false
		new String('str') == 'str'//true
		![] //true
		*/
	
		var ss = [-12,3,5,6,10].sort(function(a,b){
			return a>b;
		});
		//console.log(ss);
		
		function D(){
		
		}
		var dd =new D();
		//console.log(dd instanceof D);  //判断dd是否是D上de实例
		
		//重点
		var clickBoxs = document.querySelectorAll('.clickBox')
		for (var i = 0; i < clickBoxs.length; i++){
			clickBoxs[i].onclick = function(){
				//console.log(i) //3  //i为全局变量，每次点击输出最后一次的i值
			};
		}
		var clickBoxs = document.querySelectorAll('.clickBox')
		for (var i = 0; i < clickBoxs.length; i++){
			clickBoxs[i].onclick = function(m){
			   return function(){  //闭包
				 //console.log(m) //0,1,2
			   }
			}(i);
		}
		for(var i=0;i<5;i++){
			setTimeout(function(){
			//	console.log(i);//5次5  i是全局变量
			},1000);   
		}
		for(var i=0;i<5;i++){
			(function(){
				setTimeout(function(){  //函数中的函数就是闭包 但i还是全局变量
				//	console.log(i);//5次5
				},i*1000);   
			})(i);
		}
		for(var i=0;i<5;i++){
			(function(j){
				setTimeout(function(){
					//console.log(j);  //0,1，2,3,4
				},1000);
			})(i);
		}
		function Foo() {
			var a=0;
			return function(){
				a++;
				//console.log(a++);  //1
			}
		}
		function Foo() {
			var a=0;
			return function(){
			//	console.log(a++);  //0
			}
		}
		var fo1 = Foo(); //他其实是function(){console.log(a++);} a undefined
		//console.log(fo1());
		
		   
	function SuperType() {
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function() {
      return this.property;
    };
    function SubType() {
        this.subproperty = false;
    }
    //继承了SuperType
    SubType.prototype = new SuperType();
    SubType.prototype.getSubValue = function() {
        return this.subproperty;
    };
    var instance = new SubType();
   // alert(instance.getSuperValue()); //true

   
	function a(){
		return Array.prototype.slice.call(arguments); //arguments.callee指向当前函数 arguments.caller指向调用当前函数的函数
	}
	//console.log(a(1,2,3));
	function b(){
		var arr = Array.prototype.slice.call(arguments),
			str = arr.join().replace(/,/g," "),  //返回新数组的长度 
			aa = ["xinmei"],
			newArr = aa.push(str);
		return aa.join(",");  
	}
	//console.log(b('you','will','be','success'));//xinmei,you will be success
	
	var a = 100;
	function  xinmei(){
		var b=2*a;
		var a = 200;
		var c=a/2;
			console.log(b);  //undefined a重新声明了，成了局部变量，在他上面访问不到
			console.log(c);  //100
	}
	//xinmei();
	
	var btn = document.getElementById("btn5");
	btn.addEventListener("click",function(){console.log(1);});
	btn.addEventListener("click",function(){console.log(2);});
	btn.onclick=function(){console.log(3);}
	btn.onclick=function(){console.log(4);} //结果1,2,4 addEventListener可以给一个对象添加多个事件，而click会被覆盖掉，只显示最后一个
	
	</script>
</body> 
</html>
